<template>
  <div class="view-container">
    <card-box class="menu-tree">
      <template #header>
        <el-button @click="foldAll" icon="ZoomOut" text />
        <span>菜单树</span>
        <el-button @click="expandAll" icon="ZoomIn" text />
      </template>

      <template #search>
        <el-input v-model="filterText" placeholder="输入名称进行过滤" clearable />
      </template>

      <el-tree :ref="treeOptions.tree.ref" :node-key="treeOptions.tree.nodeKey" :props="treeOptions.tree.propConfig"
        :expand-on-click-node="false" :highlight-current="true" :data="tree.data" :filter-node-method="filterTreeNode"
        @node-click="clickNode" default-expand-all>
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span v-if="data.type !== 2" @click.stop="handleAddForm(data)">
              <el-icon>
                <Plus />
              </el-icon>
            </span>
          </span>
        </template>
      </el-tree>
    </card-box>

    <card-box class="menu-form">
      <template #header>
        <el-button @click="foldAll" icon="Delete" type="danger" text />
        <span>菜单详情</span>
        <el-button @click="handleEditForm" icon="Edit" text />
      </template>
      <el-form :ref="formOptions.editForm.ref" :model="editForm.data" :rules="rules" :disabled="disabled"
        label-width="85px">
        <el-form-item label="上级菜单" prop="parentId">
          <el-tree-select ref="selectTreeRef" :node-key="treeOptions.tree.nodeKey" :props="treeOptions.tree.propConfig"
            v-model="editForm.data.parentId" :data="parentTree" :filter-node-method="filterTreeNode" filterable
            default-expand-all check-strictly clearable />
        </el-form-item>

        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model="editForm.data.type">
            <el-radio v-for="item in menuTypeList" :label="item.value" :key="item.value" border>{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="菜单名称" prop="title">
          <el-input v-model="editForm.data.title" placeholder="请输入菜单名称" />
        </el-form-item>

        <el-form-item v-if="formItemShow.name" label="路由名称" prop="name">
          <el-input v-model="editForm.data.name" placeholder="请输入路由名称" />
        </el-form-item>

        <el-form-item v-if="formItemShow.path" label="路由地址" prop="path">
          <el-input v-model="editForm.data.path" placeholder="请输入角色标识" />
        </el-form-item>

        <el-form-item v-if="formItemShow.component" label="组件位置" prop="component">
          <el-input v-model="editForm.data.component" placeholder="请输入角色标识" />
        </el-form-item>

        <el-form-item v-if="formItemShow.state" label="菜单状态" prop="state">
          <el-switch v-model="editForm.data.state" :active-value="1" :inactive-value="0" inline-prompt active-text="启用"
            inactive-text="停用" active-color="#13ce66" inactive-color="#ff4949" />
        </el-form-item>

        <el-form-item v-if="formItemShow.visible" label="是否显示" prop="visible">
          <el-switch v-model="editForm.data.visible" :active-value="1" :inactive-value="0" inline-prompt
            active-color="#13ce66" inactive-color="#ff4949" active-icon="Check" inactive-icon="Close" />
        </el-form-item>

        <el-form-item v-if="formItemShow.linkFlag" label="是否外链" prop="linkFlag">
          <el-switch v-model="editForm.data.linkFlag" :active-value="1" :inactive-value="0" inline-prompt
            active-color="#13ce66" inactive-color="#ff4949" active-icon="Check" inactive-icon="Close" />
        </el-form-item>

        <el-form-item v-if="formItemShow.cacheFlag" label="开启缓存" prop="cacheFlag">
          <el-switch v-model="editForm.data.cacheFlag" :active-value="1" :inactive-value="0" inline-prompt
            active-color="#13ce66" inactive-color="#ff4949" active-icon="Check" inactive-icon="Close" />
        </el-form-item>

        <el-form-item v-if="formItemShow.perms" label="权限字符" prop="perms">
          <el-input v-model="editForm.data.perms" placeholder="请输入权限字符" />
        </el-form-item>

        <el-form-item label="显示顺序" prop="orderNum">
          <el-input-number v-model="editForm.data.orderNum" :min="1" :max="99" controls-position="right" />
        </el-form-item>
      </el-form>

      <template v-if="!disabled" #footer>
        <el-button @click="resetForm" size="small" auto-insert-space>重置</el-button>
        <el-button @click="handleSubmit" type="primary" size="small" auto-insert-space>保存</el-button>
      </template>
    </card-box>
  </div>
</template>

<script setup name="Menu">
import useTree from '@/hook/useTree'
import useEditForm from '@/hook/useEditForm'

import { menuTypeList } from '@/utils/constant'
import { fetchTree, add, update, deleteData } from '@/api/system/menu'
import _ from 'lodash'

const { proxy } = getCurrentInstance()

const treeOptions = {
  tree: {
    ref: 'treeRef',
    nodeKey: 'id',
    propConfig: { children: 'children', label: 'title' },
    click: {
      after: () => {
        disabled.value = true
        editForm.data = _.cloneDeep(tree.clickNode)
      }
    }
  },
  action: { query: { api: fetchTree } }
}
const {
  tree,
  filterText,
  fetchTree: fetchTreeData,
  filterTreeNode,
  expandAll,
  foldAll,
  clickNode
} = useTree(proxy, treeOptions)

const formOptions = {
  model: {
    idProp: 'id',
    tipsProp: 'name',
  },
  view: {
    refreshView: fetchTreeData
  },
  editForm: { ref: 'editFormRef', },
  action: {
    add: { api: add },
    edit: { api: update },
    // delete: { api: deleteData },
  }
}

const { editForm, resetForm, handleSubmit } = useEditForm(proxy, formOptions)

const parentTree = computed(() => {
  return filterParentMenu(tree.data)
})

function filterParentMenu(data) {
  const result = []
  for (const item of data) {
    if (item.type === 2 || editForm.data?.id === item.id) {
      // 排除按钮类型 + 节点本身
      continue
    }
    const copyItem = { id: item.id, title: item.title }
    result.push(copyItem)
    if (item.children && item.children.length > 0) {
      copyItem.children = filterParentMenu(item.children)
    }
  }
  // console.log(result, 'result')
  return result
}

const disabled = ref(true)
function handleEditForm() {
  disabled.value = false
  editForm.type = 'edit'
}

function handleAddForm(data) {
  disabled.value = false
  editForm.data = { parentId: data.id }
  editForm.type = 'add'
}

const rules = {
  type: [{ required: true, message: '菜单不能为空', trigger: 'blur' }],
  component: [{ required: true, message: '组件位置不能为空', trigger: 'blur' }],
  path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
  perms: [{ required: true, message: '权限字符不能为空', trigger: 'blur' }],
  orderNum: [{ required: true, message: '显示顺序不能为空', trigger: 'blur' }],
}
const formItemShow = reactive({
  perms: true,
  component: true,
  path: true,
  visible: true,
  state: true,
  linkFlag: true,
  cacheFlag: true
})
watch(
  () => editForm.data.type,
  (val) => {
    formItemShow.perms = val === 2
    formItemShow.component = val !== 2
    formItemShow.name = val !== 2
    formItemShow.path = val !== 2
    formItemShow.visible = val !== 2
    formItemShow.state = val !== 2
    formItemShow.linkFlag = val === 1
    formItemShow.cacheFlag = val === 1
  }
)

fetchTreeData()
</script>

<style lang="scss" scoped>
.view-container {
  display: flex;
  height: 100%;

  :deep(.menu-tree) {
    .header {
      justify-content: space-between;
    }
  }

  :deep(.menu-form) {
    .header {
      justify-content: space-between;
    }
  }

  :deep(.el-tree-node__label) {
    width: 100%;
  }

  .custom-tree-node {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    // background-color: red;
    padding-right: 10px;
  }

  .menu-form {
    // border: 1px solid var(--el-border-color);
    // padding: 5px 5px 0 0;
    margin-left: 5px;
    // background-color: #ffffff;
    width: 600px;

    .el-form {
      padding: 5px 10px 0 0;
    }
  }
}
</style>
